<template>
    <div>
        <Marquee class="w-full max-w-4xl mx-auto" :repeat="2" :pauseOnHover="true" :vertical="false" :reverse="false">
            <reviewCard v-for="item in items" :key="item.username" v-bind="item" class="w-64" />
        </Marquee>
        <Marquee class="w-full max-w-4xl mx-auto" :repeat="2" :pauseOnHover="true" :vertical="false" :reverse="true">
            <reviewCard v-for="item in items" :key="item.username" v-bind="item" class="w-64" />
        </Marquee>
    </div>
</template>

<script setup lang="ts">
import Marquee from '@/components/ui/Marquee/index.vue'
import reviewCard from '@/components/ui/Marquee/reviewCard.vue'

// 示例数据
const items = [
    {
        img: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: '张三',
        username: '@zhangsan',
        body: '这是一条走马灯内容'
    },
    {
        img: 'https://randomuser.me/api/portraits/women/2.jpg',
        name: '李四',
        username: '@lisi',
        body: '另一条内容'
    }, {
        img: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: '张三',
        username: '@zhangsan',
        body: '这是一条走马灯内容'
    },
    {
        img: 'https://randomuser.me/api/portraits/women/2.jpg',
        name: '李四',
        username: '@lisi',
        body: '另一条内容'
    }, {
        img: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: '张三',
        username: '@zhangsan',
        body: '这是一条走马灯内容'
    },
    {
        img: 'https://randomuser.me/api/portraits/women/2.jpg',
        name: '李四',
        username: '@lisi',
        body: '另一条内容'
    }, {
        img: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: '张三',
        username: '@zhangsan',
        body: '这是一条走马灯内容'
    },
    {
        img: 'https://randomuser.me/api/portraits/women/2.jpg',
        name: '李四',
        username: '@lisi',
        body: '另一条内容'
    }, {
        img: 'https://randomuser.me/api/portraits/men/1.jpg',
        name: '张三',
        username: '@zhangsan',
        body: '这是一条走马灯内容'
    },
    {
        img: 'https://randomuser.me/api/portraits/women/2.jpg',
        name: '李四',
        username: '@lisi',
        body: '另一条内容'
    }
]
</script>